<template>
  <q-card flat>
    <q-card-section class="flex items-center">
      <q-icon name="stars" size="sm" color="grey-9" class="q-mr-sm" />
      <div class="text-body1 text-bold">数据概览</div>
    </q-card-section>

    <q-separator />

    <q-card-section class="row justify-between">
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 q-pa-xs" v-for="(item, idx) in dataMap" :key="idx">
        <div class="bg-grey-2 q-pa-sm">
          <div class="text-grey-7 q-pb-sm text-bold flex justify-center items-center">
            <div>{{item.title}}</div>
          </div>
          <div class="q-px-sm text-center ">
            <span class="text-h4" :class="item.color">{{flopData[item.name] || 0}}</span><span class="text-grey-7 q-ml-sm">{{item.unit}}</span>
          </div>
        </div>
      </div>
    </q-card-section>
  </q-card>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'flopTBoard',
  props: {
    flopData: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      dataMap: [
        {
          name: 'sellMat',
          title: '在售货物',
          color: 'text-primary',
          unit: '款'
        },
        {
          name: 'sellCat',
          title: '上架分类',
          color: 'text-orange',
          unit: '种'
        },
        {
          name: 'shopEnterMoney',
          title: '线上:线下 交易额',
          color: 'text-secondary',
          unit: ''
        },
        {
          name: 'shopPrice',
          title: '线上客单价',
          color: 'text-orange-9',
          unit: '元'
        },
        {
          name: 'enterPrice',
          title: '线下客单价',
          color: 'text-cyan-8',
          unit: '元'
        },
        {
          name: 'deliveryQty',
          title: '月配送总量',
          color: 'text-deep-orange',
          unit: '笔'
        },
        {
          name: 'deliveryTime',
          title: '月配送平均时长',
          color: 'text-indigo',
          unit: '小时'
        },
        {
          name: 'waitDelQty',
          title: '待配送数量',
          color: 'text-pink',
          unit: '笔'
        }
      ]
    }
  },
  mounted () {
  },
  methods: {
  },
  watch: {
  }
});
</script>

<style lang="scss">
.subtitle {
  font-size: 0.8rem;
  height: 21px;
}
</style>
